<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <link rel="stylesheet" href="css/counter.css">
        <link rel="stylesheet" href="css/star.css">
    </head>
    <body>
        <div id='app'>
            <my-counter :value='1' :min='0' :max='10'></my-counter>
            <my-counter @update:value='update'></my-counter>
            <my-counter></my-counter>
            <my-star @update:value='updateRate' :value='r1'></my-star>
            父组件：{{r1}}
            <my-star :value='3'></my-star>
            <my-star></my-star>
        </div>
        <!-- 引入组件模板和功能 -->
        <script src="js/counter.js"></script>
        <script src="js/star.js"></script>
        <script>
            Vue.createApp({
                components: {
                    'my-counter': Counter,
                    'my-star': Star
                },
                data() {
                    return {
                        r1: 5
                    }
                },
                methods: {
                    updateRate(value) {
                        this.r1 = value;
                    },
                    update(value) {
                        alert(value);
                    }
                }
            }).mount('#app');
        </script>
    </body>
</html>    